<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://jsptags.com/tags/navigation/pager" prefix="pg"%>
<%
	String path=request.getContextPath();
	String basePath=request.getScheme()+"://"
			+request.getServerName()+":"+request.getServerPort()
			+path+"/";
%>
<!DOCTYPE html>
<html>
<base href="<%=basePath%>">
<head>
	<title>个人信息</title>
	<meta charset="utf-8">
	<link rel="icon" href="img/logo.png" sizes="32x32">
	<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
	<link rel="stylesheet" type="text/css" href="css/problem.css">
	<link rel="stylesheet" href="styles/default.css">
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/popper.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript" src="ckeditor/ckeditor.js"></script>
    <script src="layui/layui.js"></script>
	<style type="text/css">
		.img-circle{
			border-radius: 50%;
		}
		.center-block {
		    display: block;
		    margin-right: auto;
		    margin-left: auto;
		}
		.img-responsive{
			max-width: 100%;
    		height: auto;
		}
		.user-myspace-base-person-info-bottom-item {
		    font-size: 13px;
		    font-family: Hiragino Sans GB,Microsoft YaHei,Arial,sans-serif;
		    cursor: pointer;
		}
		.user-myspace-base-person-info-bottom-item-title {
		    color: #99a2aa;
		}
		.user-myspace-base-person-info-bottom-item-content {
		    margin-top: 5px;
		    color: #222;
		}
		.col-xs-4 {
		    width: 33.33333333%;
		}
		.nav-item a{
			color: #337ab7;
		}
		.problem-item{
			margin-right: 10px;
			font-size: 17px;
		}
		.layui-upload-list {
		    margin: 10px 0;
		}
		.layui-inline, img {
		    vertical-align: middle;
		}
		.layui-inline, img {
		    display: inline-block;
		    vertical-align: middle;
		}
		.layui-upload-file {
		    display: none!important;
		    opacity: .01;
		    filter: Alpha(opacity=1);
		}
		#visible{
			width: 25px;
	        height: 15px;
	        position: absolute;
	        right: 20px;
	        margin-top: 12px;
	        top: 1px;
	        text-align: center;
	        cursor: pointer;
		}
		.dropdown-menu .link-myspace:hover{
			color:black;
		}
	</style>
</head>
<body style="background:url('img/ba.png');background-size: auto;background-color: rgba(0,0,0,0.1);">
	<!-- 顶部导航 -->
	<div class="nav fixed-top">
		<div class="container">
			<div class="top-title"><span>OnlineJudge</span></div>
			<div class="top-list">
				<ul>
					<li class=""><a href="problem/list?pager.offset=0">题库</a></li>
					<li class=""><a href="solution/list?pager.offset=0">题解</a></li>
					<li class=""><a href="community/list?pager.offset=0">论坛</a></li>
				</ul>
			</div>
			<div class="top-last">
				<c:if test="${currentUser!=null }">
					<a href="user/myspace" class="dropdown-toggle" data-toggle="dropdown">
	                    <img class="img-circle" src="${pageContext.request.contextPath }/img/${currentUser.getUserImg() }" style="margin: -5px;" width="35px">
	                    &nbsp;
	                    <strong id="id_user_username">${currentUser.getUserName() }</strong>
	                    <b class="caret"></b>
                	</a>
                	<ul class="dropdown-menu" style="width:50px;margin-top:16px;font-size: 13px;text-align: center">
                		<li style="padding: 0;"><hr style="margin:0;"><a class="link-myspace" href="user/myspace" style="font-size:14px;">个人中心</a></li>
                		<li style="padding: 0;"><hr style="margin:0;"><a class="btn btn-outline-primary btn-lg btn-block" role="button" href="user/logout" style="font-size:14px;">退出登录</a></li>
                    </ul>
				</c:if>
			</div>
		</div>
	</div>
	<!-- 内容 -->
	<div class="container" style="margin-top: 70px;">
		<div class="panel panel-default">
			<div class="panel-body">
				<div class="row">
				    <div class="col-7">
				    	<h3 style="font-size: 16px;">个人信息</h3>
				    	<hr>
				    	<form action="user/saveInfo" method="post" id="formdemo">
				    		<input type="hidden" name="userId" id="userId" value="${currentUser.getUserId() }">
						  <div class="form-group row">
						    <label for="username" class="col-sm-2 col-form-label" style="text-align: right;">用户名</label>
						    <div class="col-sm-10" style="padding-left: 0px;">
						      <input type="text" class="form-control" name="userName" id="username_demo" value="${currentUser.getUserName() }" placeholder="请输入用户名">
						    </div>
						  </div>
						  <div class="form-group row">
						    <label for="password" class="col-sm-2 col-form-label" style="text-align: right;">密码</label>
						    <div class="col-sm-10" style="padding-left: 0px;">
						      <input type="password" class="form-control" name="passWord" id="password_demo" value="${currentUser.getPassWord() }">
						      <img id="visible" onclick="hideShowPsw()" src="img/visible.png">
						    </div>
						  </div>
						  <div class="form-group row">
						    <label for="email" class="col-sm-2 col-form-label" style="text-align: right;">邮箱</label>
						    <div class="col-sm-10" style="padding-left: 0px;">
						      <input type="email" class="form-control" name="email" id="email_demo" value="${currentUser.getEmail() }" placeholder="请输入邮箱">
						    </div>
						  </div>
						  <input type="hidden" name="userImg" id="userImg_demo" value="${currentUser.getUserImg() }">
						  <div class="row justify-content-center">
							  <button type="submit" class="btn btn-primary">保存</button>
							  <button type="reset" class="btn btn-outline-warning" style="margin-left: 20px;">重置</button>
						  </div>
						</form>
				    </div>
				    <div class="col-4">
				    	<h3 style="font-size: 16px;">头像</h3>
				    	<hr>
				    	<div class="fileupload">
							<button type="button" class="btn btn-primary" id="test1">上传图片</button>
							<div class="layui-upload-list">
								<img class="layui-upload-img" id="demo1" src="${pageContext.request.contextPath }/img/${currentUser.getUserImg() }" style="max-width: 100%;height:auto;">
								<p id="demoText"></p>
							</div>
						</div>
				    </div>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		layui.use('layer', function() {
			var layer = layui.layer;
			var $ = layui.jquery;
			//表单验证
			$("#formdemo").submit(function() {
				if($("#username_demo").val()==""){
					layer.msg('用户名不能为空', { icon: 2, time: 1000, shade: [0.6, '#000', true] });
					return false;
				}else if($("#password_demo").val()==""){
					layer.msg('密码不能为空', { icon: 2, time: 1000, shade: [0.6, '#000', true] });
					return false;
				}else if($("#email_demo").val()==""){
					layer.msg('邮箱不能为空', { icon: 2, time: 1000, shade: [0.6, '#000', true] });
					return false;
				}else if($("#userImg_demo").val()==""){
					layer.msg('图片不能为空', { icon: 2, time: 1000, shade: [0.6, '#000', true] });
					return false;
				}
				return true;
			});
		});
	</script>
	<script type="text/javascript">
		//隐藏text block，显示password block
	    var demoImg = document.getElementById("visible");
	    var PWD = document.getElementById("password_demo");
	    function hideShowPsw() {
	        if (PWD.type == "password") {
	            PWD.type = "text";
	            demoImg.src = "img/visibled.png"; //图片路径（闭眼图片）
	        } else {
	            PWD.type = "password";
	            demoImg.src = "img/visible.png"; // 图片路径（睁眼图片）
	        }
	    }
	</script>
	<script type="text/javascript">
		layui.use('upload', function() {
			var $ = layui.jquery,
				upload = layui.upload;
			var uploadInst = upload.render({
				elem: '#test1',
				url: 'fileUpload/img',
				headers: {access_token: localStorage.access_token},
				field: "imgFile",
				auto: true,
				before: function(obj) {
					//预读本地文件
					obj.preview(function(index, file, result) {
						$('#demo1').attr('src', result); //图片链接（base64）
					});
				},
				done: function(res) {
					console.log(res);
					//上传失败
					if (res.code > 0) {
						return layer.msg('上传失败',{icon:5,time:1500});
					}else{
						//把图片路径返回来
						$('#userImg').val(res.data);
						//上传成功
						return layer.msg('上传成功',{icon:1,time:1500});
					}
				},
				error: function() {
					//演示失败状态,并实现重传
					var demoText = $('#demoText');
					demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
					demoText.find('.demo-reload').on('click', function() {
						uploadInst.upload();
					});
				}
			});
		});
	</script>
</body>
</html>